<!DOCTYPE html>
<html lang="zh-CN" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head th:include="/common/inc::header"/>
<body>
<form class="layui-form" style="margin-top: 15px">
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 80px">订单号:</label>
        <div class="layui-input-inline" style="width:12%">
            <input type="text" name="billNo" id="billNo" autocomplete="off"
                   class="layui-input">
        </div>
        <label class="layui-form-label" style="width:80px">用户手机:</label>
        <div class="layui-input-inline" style="width:8%">
            <input type="text" name="account" id="account" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="width: 80px">入住时间:</label>
        <div class="layui-input-inline" style="width:7%">
            <input type="text" class="layui-input" id="addTimeSt" name="addTimeSt">
        </div>
        <div class="layui-input-inline" style="width:7%">
            <input type="text" class="layui-input" id="addTimeEt" name="addTimeEt">
        </div>
        <button class="layui-btn" id="searchBtn" lay-submit lay-filter="searchBtn">查询</button>
        <a id="down" class="layui-btn layui-btn-radius" download="订房订单.csv" href="#">导出</a>
    </div>
</form>
<table class="layui-table" id="grid" lay-filter="grid">
</table>
<script th:replace="/common/inc::incJs"></script>
<script>
    var tableIns;

    layui.use('laydate', function () {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#addTimeSt', //指定元素
            format: 'yyyy-MM-dd'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#addTimeEt', //指定元素
            format: 'yyyy-MM-dd'
        });

    });


    $('#down').on('click', function (aLink) {
        var table = layui.table;
        var tab = table.cache.grid;
        var str = "用户手机,身份证,房间名称,用户姓名,状态,支付方式,订单金额,入住时间,离店时间,下单时间,支付时间,订单编号,付款凭证号\n";
        var statusStr = "";
        var paymentStr = "";
        $.each(tab, function (i, row) {
            if (row["status"] == "0") {
                statusStr = "待支付";
            } else if (row["status"] == "1") {
                statusStr = "待入住";
            } else if (row["status"] == "2") {
                statusStr = "已入住";
            } else if (row["status"] == "3") {
                statusStr = "已完成";
            } else if (row["status"] == "4") {
                statusStr = "已取消";
            } else if (row["status"] == "5") {
                statusStr = "已退费";
            }

            if (row["payment"] = "wechat") {
                paymentStr = "微信";
            }
            str = str + row["account"] + "," + "ID" + row["idCard"] + "," + row["homeName"] + "," + row["trueName"] + "," +
                "" + "ID" + row["idCard"] + "," + statusStr + "," + paymentStr + "," + row["billFee"] + "," + row["inTime"] + "," + row["outTime"] + "," + row["createTime"] + "," + row["payDate"] + "," +
                "" + "SY" + row["billNo"] + "," + "SY" + row["tradeNo"] + "\n";
        });
        str = encodeURIComponent(str);
        aLink.target.href = "data:text/csv;charset:utf-8,\ufeff" + str;
    });

    $(function () {
        var t = new Date();
        t.setTime(t.getTime());
        $("#addTimeSt").val(t.format("yyyy-MM-dd"));
        tableIns = createTable({
            url: '/hotel/security/bill/billList?addTimeSt=' + t.format("yyyy-MM-dd")+'&status=4',
            cols: [[{
                fixed: 'left',
                title: '操作',
                width: 200,
                align: 'center',
                toolbar: '#opbar'
            }, {
                field: 'account',
                title: '用户手机',
                width: 120
            }, {
                field: 'idCard',
                title: '身份证',
                width: 200
            },
                {field: 'homeName', title: '房间名称', width: 150}, {
                    field: 'trueName',
                    title: '用户姓名',
                    width: 120
                }, {
                    field: 'status',
                    title: '状态',
                    width: 80, templet: '#statusTpl'
                }, {field: 'inTime', title: '入住时间', width: 170}
                , {field: 'outTime', title: '离店时间', width: 170}
                , {field: 'createTime', title: '下单时间', width: 170}, {field: 'billNo', title: '订单编号', width: 220}
            ]], height: 'full-130'
        });
    })
    ;

    layui.table.on('tool(grid)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值
        var tr = obj.tr; //获得当前行 tr 的DOM对象

        if (layEvent === 'detail') { //查看
            openDialog({
                url: "/hotel/security/bill/detail?id=" + data.id,
                area: ["95%", "95%"]
            });
        } else if (layEvent === 'CheckIn') { //入住
            layer.confirm('请检查住户身份证是否符合,确认后用户将变更为入住状态', function (index) {
                changeStatus(data.id, data.status);
            })
        } else if (layEvent === 'CheckOut') { //退房
            layer.confirm('请确认是否正式退房,确认后用户将变更为退房状态', function (index) {
                //获取当前时间
                var currentTime = new Date();

                var customTimeSt = data.outTime.split(" ")[0] + " 00:00:00";
                var customTimeEn = data.outTime;
                customTimeSt = customTimeSt.replace("-", "/");//替换字符，变成标准格式
                customTimeEn = customTimeEn.replace("-", "/");//替换字符，变成标准格式
                customTimeSt = new Date(Date.parse(customTimeSt));
                customTimeEn = new Date(Date.parse(customTimeEn));

                if (currentTime >= customTimeSt && currentTime <= customTimeEn) {
                    changeStatus(data.id, data.status);
                } else {
                    layer.confirm('您未在规定的时间内退房，保证金将无法退还，确定要要办理退房吗？', function (index) {
                        changeStatus(data.id, data.status);
                    })
                }
            })
        }
    });

    function changeStatus(billId, status) {
        if (status == 1) {
            $.post('/hotel/security/bill/updateCheck', {id: billId, status: 2}, function (res) {
                    if (res.code < 0) {
                        layer.msg(res.message);
                    }
                    else {
                        layer.msg("入住成功");
                        tableIns.reload();
                    }
                }
            )
        } else if (status = 2) {
            $.post('/hotel/security/bill/updateCheck', {id: billId, status: 3}, function (res) {
                    if (res.code < 0) {
                        layer.msg(res.message);
                    }
                    else {
                        layer.msg("退房成功");
                        tableIns.reload();
                    }
                }
            )
        }
    }

    layui.form.on('submit(searchBtn)', function (data) {
        tableIns.reload({
            where: data.field
        });
        return false;
    });
</script>
<script type="text/html" id="statusTpl">
    {{#  if(d.status ===0){ }}
    <span>待支付</span>
    {{#  } else if(d.status ===1){ }}
    <span style="color: #56b02a;">待入住 </span>
    {{#  }else if(d.status ===2){ }}
    <span style="color: #56b02a;">已入住</span>
    {{#  }else if(d.status ===3){ }}
    <span style="color: #9F9F9F;">已完成</span>
    {{#  }else if(d.status ===4){ }}
    <span style="color: #FF0000;">已取消</span>
    {{#  }else if(d.status ===5){ }}
    <span style="color: blue;">已退费</span>
    {{#  } }}
</script>

<script type="text/html" id="paymentTpl">
    {{#  if(d.payment ==="wechat"){ }}
    <span>微信</span>
    {{#  } }}
</script>
<script type="text/html" id="opbar">
    {{# if(d.status==1){ }}
    <a class="layui-btn layui-btn-xs" lay-event="CheckIn">确认入住</a>
    {{#  }else if(d.status ===2){ }}
    <a class="layui-btn layui-btn-xs" lay-event="CheckOut">确认离店</a>
    {{#  } }}
</script>
</body>
</html>
